Added a couple of layout ideas and some incredibly minor nitpicks.

❓ Do we want to put the components in their own folder within __tests__ to mirror the structure within src?

@alex-rawlings-yyc reviewed 15 files and all commit messages, and made 6 comments.
Reviewable status: all files reviewed, 5 unresolved discussions (waiting on imnasnainaec).

src/interlinearizer.web-view.tsx line 130 at r1 (raw file):

      )}

      {!bookError && !tokenizeError && !isLoading && book && continuousScroll === true && (

⛏️ continuousScroll === true can be simplified to continuousScroll

src/interlinearizer.web-view.tsx line 131 at r1 (raw file):

      {!bookError && !tokenizeError && !isLoading && book && continuousScroll === true && (
        <ContinuousView

❓ Would be best for the continuous view to be static and have only the segment view scroll.

src/interlinearizer.web-view.tsx line 151 at r1 (raw file):

              segment={seg}
              isActive={seg.startRef.verse === scrRef.verseNum}
              displayMode={continuousScroll === true ? 'baseline-text' : 'token-chip'}

⛏️ continuousScroll === true can be simplified to continuousScroll

src/interlinearizer.web-view.tsx line 226 at r1 (raw file):

            />
          }
          endAreaChildren={

❓ Might it be better to move the toggle here to reduce the number of toolbars?

src/components/ContinuousView.tsx line 124 at r1 (raw file):

      const focusedSeg = tokenSegmentRef.current[currentlyFocusedPhrase.tokenIndex];
      if (
        focusedSeg &&

⛏️ this could use optional chaining

Test subfolders added.

@imnasnainaec made 3 comments and resolved 3 discussions.
Reviewable status: 9 of 18 files reviewed, 2 unresolved discussions (waiting on alex-rawlings-yyc and imnasnainaec).

src/interlinearizer.web-view.tsx line 131 at r1 (raw file):

Indeed. To do this smoothly, I'm replacing the ProjectBookFetcher with a custom hook.

src/interlinearizer.web-view.tsx line 226 at r1 (raw file):

Done, and moved the Scroll group selector over with the BookChapterControl.

Made a couple tweaks that should improve performance: #42

The current fade-in behaviour could be kept as an accessibility option, as I could see the words quickly scrolling by having ill effects on the photosensitive. Or perhaps the scrolling is headache-inducing for the general public, as well.

@alex-rawlings-yyc partially reviewed 9 files and all commit messages, made 2 comments, and resolved 2 discussions.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on imnasnainaec).

src/interlinearizer.web-view.tsx line 55 at r2 (raw file):

  // Drive UI from optimistic local state and clear pending once the setting confirms.
  useEffect(() => {

The setting never seems to resolve for me, so the toggle ends up being disabled after the continuous view appears.

@alex-rawlings-yyc made 6 comments.
Reviewable status: all files reviewed, 7 unresolved discussions (waiting on imnasnainaec).

src/interlinearizer.web-view.tsx line 117 at r2 (raw file):

        />
        {projectId && !bookError && !tokenizeError && !isLoading && book && continuousScroll && (
          <div className="tw-bg-background tw-py-2">

⛏️ Might be nice to have a line or shadow on the bottom for clear separation

src/interlinearizer.web-view.tsx line 118 at r2 (raw file):

        {projectId && !bookError && !tokenizeError && !isLoading && book && continuousScroll && (
          <div className="tw-bg-background tw-py-2">
            <ContinuousView

❓ It may be worthwhile to make the scrollbar only appear with the segment view so we can implement scrolling controls in the continuous view (e.g., scrolling down moves the view forward). Though this may involve decoupling the x-position of the view from the focused token, so perhaps not. I just found myself wanting to use the scroll wheel to navigate the continuous view.

src/interlinearizer.web-view.tsx line 174 at r2 (raw file):

                    isActive={seg.startRef.verse === scrRef.verseNum}
                    displayMode={continuousScroll ? 'baseline-text' : 'token-chip'}
                    onClick={() =>

If this component is memoized, this function should be wrapped in useCallback() and the onClick signature in SegmentView changed, e.g.

interlinearizer.web-view.tsx

const handleSegmentSelect = useCallback(
    (ref: { book: string; chapter: number; verse: number }) => {
      setScrRef({ book: ref.book, chapterNum: ref.chapter, verseNum: ref.verse });
    },
    [setScrRef],
  );

SegmentView.tsx

onClick?: (ref: { book: string; chapter: number; verse: number }) => void;

src/components/PhraseBox.tsx line 13 at r2 (raw file):

 * @returns A bordered inline container
 */
export default function PhraseBox({

I think it would be good to wrap this in memo() to reduce the amount of re-renders given how many of these there can be at once and how infrequently they're changed

src/components/SegmentView.tsx line 18 at r2 (raw file):

 * @returns A button containing the segment's verse label and content
 */
export default function SegmentView({

I think it would be good to wrap this in memo() to reduce the amount of re-renders given how many of these there can be at once and how infrequently they're changed

src/components/TokenChip.tsx line 11 at r2 (raw file):

 * @returns A styled inline span
 */
export default function TokenChip({ token }: Readonly<{ token: Token }>) {

I think it would be good to wrap this in memo() to reduce the amount of re-renders given how many of these there can be at once and how infrequently they're changed

@imnasnainaec made 2 comments and resolved 6 discussions.
Reviewable status: 4 of 26 files reviewed, 1 unresolved discussion (waiting on alex-rawlings-yyc and imnasnainaec).

src/interlinearizer.web-view.tsx line 55 at r2 (raw file):

Fixed.

src/interlinearizer.web-view.tsx line 118 at r2 (raw file):

I think that will be a follow-up task.